<template>
  <div>
    <div>
      <div  class="body_bg">
        <div  class="top">
          <div  class="top-div-btn">
            <span  class="top-div-btn1">
                <router-link
                    to="/set"
                    class="iconfont"
                    style="color: rgb(255, 255, 255); font-size: 22px"
                >
                    <!---->&#xe633;
                </router-link>
            </span>
            <span  class="top-div-btn2">
                <router-link
                    to="/message"
                    class="iconfont"
                    style="color: rgb(255, 255, 255); font-size: 22px"
                >
                    <!---->&#xe60f;
                </router-link>
            </span>
          </div>
        </div>
        <div  class="personal-div">
          <div  class="personal-top">
            <div  class="container">
              <div  class="top-div">
                <div  class="top-div-left">
                  <div  class="top-div-img">
                    <img src="../../assets/img/user.png">
                  </div>
                  <span  class="username">{{name}}</span>
                </div>
              </div>
              <div  class="personal-top-list">
                <a>
                  <p>0</p>
                  <span >收藏夹</span>
                  </a>
                <a>
                  <p >0</p>
                  <span >关注店铺</span>
                </a>
                <a>
                  <p >0</p>
                  <span >我的积分</span>
                </a>
                <a>
                  <p >0</p>
                  <span >浏览记录</span>
                  </a>
              </div>
            </div>
          </div>
          <div  class="personal-body container">
            <div  class="personal-body-list mb20">
              <router-link  class="personal-body-list-dt" to="/order">
                我的订单
                <a>
                  查看全部
                  <i
                    class="iconfont"
                    style="float: right; "
                  >
                  <!---->&#xe770;</i>
                  </a>
              </router-link>
              <div  class="personal-body-list-dd">
                <a>
                  <div  class="personal-list-img">
                    <i
                      class="iconfont"
                      style="font-size: 26px"
                    >
                      <!---->&#xe620;
                    </i>
                  </div>
                  <span @click="handelName('pay')">待付款</span>
                  </a>
                <a>
                  <div  class="personal-list-img">
                    <i
                      class="iconfont"
                      style="font-size: 26px"
                    >
                      <!---->&#xe678;
                    </i>
                  </div>
                  <span @click="handelName('shipments')">待发货</span>
                </a>
                <a>
                  <div  class="personal-list-img">
                    <i
                      class="iconfont"
                      style="font-size: 26px"
                    >
                    <!---->&#xe61b;
                    </i>
                  </div>
                  <span @click="handelName('receipt')">待收货</span>
                </a>
                <a>
                  <div  class="personal-list-img">
                    <i
                      class="iconfont"
                      style="font-size: 26px"
                    >
                    <!---->&#xe600;
                    </i>
                  </div>
                  <span @click="handelName('appraise')">待评价</span>
                </a>
                <!---->
              </div>
            </div>
            <div  class="personal-body-list2">
              <a>
                <div  class="personal-list-img">
                  <img src="../../assets/img/优惠券.png">
                </div>
                <span >优惠券</span>
              </a>
              <a>
                <div  class="personal-list-img">
                  <img src="../../assets/img/账户余额.png">
                </div>
                <span >账户余额</span>
              </a>
              <a>
                <div  class="personal-list-img">
                  <img src="../../assets/img/分销大厅.png">
                </div>
                <span>分销大厅</span>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
     <Footer :active-num="4"/>
  </div>
 
</template>

<script>
import Footer from '../../components/Footer.vue'
export default {
  data() {
    return {
      name:'',
    }
  },
  methods: {
    handelName(names) {
      this.$router.push({path:'/order',query:{a:names}})
    }
  },
  created () {
  this.name = localStorage.getItem('name');
  },
  components: {
    Footer,
  },
};
</script>

<style scoped src="../../assets/css/Personal.css">
/* @import url("../../assets/css/Personal.css"); */
</style>